<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div class="titleArea" flex="main:justify cross:center">
                <div flex="cross:center">
                    <img :src="student.photoUrl+'?imageView2/0/w/68/format/jpeg'" class="titleWrapper">
                    <div>
                        <div class="teacherName font13" flex-box="1" v-text="student.studentName"></div>
                        <div class="teacherName font13" flex-box="1" v-text="student.studentNameEN"></div>
                    </div>
                </div>
                <div class="time opacity5 font10" flex-box="0" v-text="opus.createTime"></div>
            </div>
            <div v-text="opus.title" class="title Medium font12"></div>
            <div class="content font12" v-html="opus.comment"
                 :style="{marginBottom:imgList.length>0?0.12+'rem':''}"></div>
            <div class="swiper-container" v-if="imgList&&imgList.length>1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(slide,index) in imgList"
                         @click.stop="clientSwiper(imgList,index)">
                        <img v-lazy="imagedomain+slide.imgUrl+'?imageView2/0/w/622/format/jpeg'" v-if="slide.type==1"
                             class="picesItem"/>
                        <img v-lazy="imagedomain+slide.imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="slide.type==3"
                             class="picesItem"/>
                        <img src="../../images/play.png" class="play" v-if="slide.type==3"/>
                    </div>
                </div>
            </div>
            <div class="oneImgBg" v-if="imgList&&imgList.length==1" @click.stop="clientSwiper(imgList,0)">
                <img v-lazy="imagedomain+imgList[0].imgUrl+'?imageView2/0/w/750/format/jpeg'"
                     v-if="imgList[0].type==1"/>
                <img v-lazy="imagedomain+imgList[0].imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="imgList[0].type==3"
                     class="picesItem"/>
                <img src="../../images/play.png" class="play" v-if="imgList[0].type==3"/>
            </div>
            <div class="handleArea" flex="main:justify cross:center">
                <div class="praise" flex-box="0" flex="main:center cross:center" @click="clickZan()">
                    <div class="praiseIcon" v-if="rs.praiseState==0"></div>
                    <div class="praiseIconFocus" v-if="rs.praiseState==1"></div>
                    <p class="font10">点赞</p>
                </div>
                <div class="comment" flex-box="0" flex="main:center cross:center" @click="setComment()">
                    <div class="commentIcon"></div>
                    <p class="font10">评论</p>
                </div>
                <div class="share" flex-box="0" flex="main:center cross:center" @click="share()">
                    <div class="shareIcon"></div>
                    <p class="font10">分享</p>
                </div>
            </div>
            <commentList :text="'回复 '" :commentObj="rs" :type="'APP_OPUS'" :index="0" :classId="classId" v-if="rs"
                         ref="commentMethod"></commentList>
        </div>
    </div>
</template>
<script type="text/babel">
    import API from '../../../api/api.js'
    import {domain, imagedomain} from '../../../api/api.js'
    import commentList from '../../../components/commentList_header.vue'
    import '../../../vendor/js/swiper.min.js'
    const api = new API();
    export default{
        data(){
            return {
                imgList: [],
                unReadList: [],
                student: '',
                imagedomain: imagedomain,
                role: this.$route.query.role ? this.$route.query.role : '',
                classId: this.$route.query.classId ? this.$route.query.classId : '',
                appId: this.$route.query.appId ? this.$route.query.appId : this.$route.query.tid,
                host: this.$route.query.host ? this.$route.query.host : '',
                isDetail: this.$route.query.isDetail,
                shareUrl: '',
                shareInfo: '',
                opus: '',
                rs: ''
            }
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction', this.isDetail == 1 ? this.$util.goBack : this.closeWebView);
            this.$nextTick(function () {
                setTimeout(() => {
                    this.propsTitle();
                }, 300)
                this.getDetail();
            })
        },
        components: {
            commentList
        },
        methods: {
            closeWebView(){
                this.$util.JsBridge('closeWebView', {}, () => {})
                this.$util.JsBridge('refreshAppCellInfo',{},()=>{})
            },
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '今日作品',
                }, (res) => {
                })
            },
            getDetail () {
                let param = {
                    classId: this.classId
                };
                this.host ==1 ? param.stuOpusId = this.appId : param.opusId = this.appId
                api.getOpusDetail(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.rs = rs;
                        this.imgList = rs.opusPic;
                        this.shareUrl = rs.shareUrl;
                        this.opus = rs.stuOpus;
                        this.opus.createTime = this.$util.getDate(this.opus.createTime);
                        this.student = rs.student;
                        if (this.student.photoUrl === '') {
                            this.student.photoUrl = this.$util.getDefaultHeader(this.student.studentId)
                        }
                        this.$nextTick(function () {
                            new Swiper('.swiper-container', {
                                slidesPerView: 1.2,
                                spaceBetween: 12,
                                observer: true,
                                observeParents: true,
                            });
                            document.documentElement.scrollTop=1;
                            document.body.scrollTop=1;
                        })
                    }else{
                        this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/detail',api:'getOpusDetail',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/detail',api:'getOpusDetail',success:false,data:'网络异常'}));
                });
            },
            clickZan(){
                let param = {
                    focusType: 104,
                    appId: this.appId,
                }
                this.rs.praiseState == 1 ?
                    api.cancelZan(param).then(res => {
                        let {code} = res;
                        if (code == 200) {
                            this.rs.praiseState = 0;
                        }else{
                            this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/detail',api:'cancelZan',success:false,data:res}));
                        }
                    }).catch(()=>{
                        this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/detail',api:'cancelZan',success:false,data:'网络异常'}));
                    }) : api.clickZan(param).then(res => {
                    let {code} = res;
                    if (code == 200) {
                        this.rs.praiseState = 1;
                    }else{
                        this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/detail',api:'clickZan',success:false,data:res}));
                    }
                }).catch(()=>{
                        this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/detail',api:'clickZan',success:false,data:'网络异常'}));
                    })
            },
            share(){
                let param = {
                    shareCode: 'APP_OPUS',
                    classId: this.classId,
                    tid: this.appId
                };
                api.getShareInfo(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.shareInfo = rs;
                    }else{
                        this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/detail',api:'getShareInfo',success:false,data:res}));
                    }
                }).then(() => {
                    this.$util.JsBridge('share', {
                        imgUrl: this.imgList.length > 0 ? this.imgList[0].type == 1 ? imagedomain + this.imgList[0].imgUrl : imagedomain + this.imgList[0].imgUrl + '?vframe/jpeg/offset/1/w/80' : '',
                        title: this.shareInfo.title,
                        content: this.shareInfo.content,
                        type: -1,
                        shareUrl: this.shareUrl + '&appId=' +(this.host ==1?this.appId:this.opus.tid) + '&role=' + this.role,
                        tid: this.appId
                    }, (res) => {
                    })
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/detail',api:'getShareInfo',success:false,data:'网络异常'}));
                })
            },
            setComment(){
                this.$util.JsBridge('setComment', {
                        limit: 500,
                        placeHolder: '请输入500字以内评论'
                    }, (result) => {
                        let data = {};
                        if (result.content === '') {
                            this.$toast('评论内容不能为空')
                        } else {
                            data.type = result.type;
                            if (data.type == 2) {
                                data.time = result.time;
                            }
                            data.content = this.$util.utf16toEntities(result.content)
                            const param = {
                                classId: this.classId,
                                type: data.type,
                                appId: this.opus.opusId,
                                secId: this.opus.tid,
                                content: data.content,
                                appCode: 'APP_OPUS'
                            }
                            if (result.type == 2) {
                                param.time = result.time;
                            }
                            let response = api.setComment(param);
                            response.then((res) => {
                                let {code, rs} = res;
                                if (code === 200) {
                                    this.$refs.commentMethod.sonSetComment(rs);
                                }else{
                                    this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/detail',api:'setComment',success:false,data:res}));
                                }
                            }).catch(()=>{
                                this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/detail',api:'setComment',success:false,data:'网络异常'}));
                            })
                        }
                    }
                )
            },
            clientSwiper(pices, index){
                let arr = Array.prototype.toString.call(pices) === '[object String]' ? JSON.parse(JSON.stringify(JSON.parse(pices))) : JSON.parse(JSON.stringify(pices))
                arr.forEach(function (e) {
                    e.imgUrl = imagedomain + e.imgUrl;
                    if (e.type == 3) {
                        e.coverUrl = imagedomain + e.imgUrl + '?vframe/jpeg/offset/1';
                    }
                });
                this.$util.JsBridge('picesSwiper', {
                    picesList: arr,
                    picesIndex: index
                }, (res) => {
                })
            },
        }
    }
</script>
<style scoped lang="scss">
    .swiper-slide {
        height: 2rem;
        overflow: hidden;
        background: #d8d8d8;
        .picesItem {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .oneImgBg {
        position: relative;
        padding: 0 0.12rem;
        width: 100%;
        height: 2rem;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .container {
        height: 100%;
        background: #0d0d0d;
        .titleArea {
            box-sizing: content-box;
            height: 0.34rem;
            padding: 0.12rem;
            .titleWrapper {
                height: 0.34rem;
                width: 0.34rem;
                border-radius: 100%;
                overflow: hidden;
                margin-right: 0.12rem;
                img {
                    width: 100%;
                    height: 100%;
                    -o-object-fit: cover;
                    object-fit: cover;
                }
            }
            .teacherName {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .title {
            margin-bottom: 0.08rem;
            padding: 0 0.12rem;
        }
        .content {
            padding: 0 0.12rem;
        }
        .handleArea {
            padding: 0 0.12rem;
            height: 0.58rem;
            border-bottom: 0.12rem solid rgba(0, 0, 0, 0.5);
            .praiseIcon {
                margin-right: 0.05rem;
                height: 0.14rem;
                width: 0.16rem;
                background: url("../../images/zan.png") no-repeat center center/contain;
            }
            .praiseIconFocus {
                margin-right: 0.05rem;
                height: 0.14rem;
                width: 0.16rem;
                background: url("../../images/zan_sel.png") no-repeat center center/contain;
            }
            .commentIcon {
                margin-right: 0.05rem;
                height: 0.15rem;
                width: 0.15rem;
                background: url("../../images/comment.png") no-repeat center center/contain;
            }
            .shareIcon {
                margin-right: 0.05rem;
                height: 0.13rem;
                width: 0.14rem;
                background: url("../../images/share.png") no-repeat center center/contain;
            }
        }
        .noSeeArea {
            padding: 0 0.04rem;
            padding-top: 0.14rem;
            overflow: hidden;
            white-space: nowrap;
            .noSeeTitle {
                padding-left: 0.08rem;
            }
            .noSeeList {
                padding-top: 0.12rem;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                overflow-scrolling: touch;
                .noSeeItem {
                    width: 0.5rem;
                    margin-right: 0.12rem;
                    .imgWrapper {
                        margin: 0 auto;
                        height: 0.3rem;
                        width: 0.3rem;
                        border-radius: 100%;
                        overflow: hidden;
                        img {
                            height: 100%;
                            width: 100%;
                            display: block;
                            -o-object-fit: cover;
                            object-fit: cover;
                        }
                    }
                    p {
                        text-align: center;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        padding-top: 0.08rem;
                    }
                }
            }
        }
    }
</style>